body {
  margin: 0;
  background-color: #f5f5f5;
}

/* fade-slide */
.fade-slide-leave-active,
.fade-slide-enter-active {
  transition: all 0.3s;
}

.fade-slide-enter-from {
  transform: translateX(-30px);
  opacity: 0;
}

.fade-slide-leave-to {
  transform: translateX(30px);
  opacity: 0;
}
 .render-form {
  display: flex;//将.render-form元素设置为弹性布局。
  flex-direction: row; //子元素按行排列
  flex-wrap: wrap; //如果子元素溢出容器宽度，会换行显示
  flex-shrink: 0;//子元素不会收缩。
  flex-grow: 0;//子元素不会扩展。
  background: #fff;//背景颜色为白色。
  margin: -20px -20px 0px;//外边距，上边距为0，左右各为-20px。
  padding: 20px 20px 20px 0;//内边距，上边距为0，左右各为20px。
  gap: 0 calc(4% / 4); //设置子元素之间的间隔，水平间隔为0，垂直间隔为容器宽度的4%除以4。
 
  // justify-content: space-between;
  .el-form-item {
    width: 18%;
    min-width: 300px;
    display: flex;
    flex-shrink: 0;
    flex-grow: 0;
 
    &:last-child {
      width: auto;
      min-width: 180px;
    }
 
    &.date-range {
      width: 440px;
    }
 
    .el-form-item__content {
      flex: 1;
      margin-left: 0 !important;
 
      .el-date-editor--datetimerange.el-input,
      .el-date-editor--datetimerange.el-input__inner {
        width: 100%;
      }
    }
  }
}